import React, {useState} from 'react';
import {View, Modal ,Text, Button as Button2,  TextInput, TouchableOpacity, StyleSheet,PixelRatio,Alert } from 'react-native';
import axios from 'axios';
import { styles} from './MyStyle';
import {MyButton01} from './UiComponents';

export const Test002 =()=> {
  const [modalVisible, setModalVisible] = useState(false);

  const  a=false

  const  b =  [1,2,3]


  // const [text, setText] = useState('');
  // const handlePress = () => {
  //   setText('');
  //   // 点击按钮后，5秒后更新文本
  //   setTimeout(() => {
  //     setText('文字已显示3');
  //   }, 1000); // 5000毫秒 = 5秒
  // };

  const  arr=[];

  for (let i = 0; i < b.length; i++) {
   arr.push( <Text>{i.toString()}</Text>)
    }
    
  
  return <View  style={ 
    { 
      alignItems:'center',
      flexDirection: 'row', gap :16,padding: 0,marginBottom :16 }
    }>

{a?(<Text>a is true</Text>):(<Text>a is false</Text>)}


     

{a&& (
  <MyButton01 text="我是对话框" onPress={()=>{

  }  }></MyButton01>
)}


{/* 
if(a){

<Text>if true</Text>


} else{

<Text>else if true</Text>

} */}




<MyButton01 text="对话框" onPress={()=>{setModalVisible(true)}}></MyButton01>

<Text>{a}</Text>

<Text>长度：{b.length}</Text>

{/* <Text>{b[0]}</Text>
<Text>{b[1]}</Text>
<Text>{b[2]}</Text> */}

{arr}








<Modal
        animationType="slide" // 动画类型： 'slide', 'fade', or 'none'
        transparent={true}    // 背景是否透明
        visible={modalVisible} // 控制是否显示
        onRequestClose={() => setModalVisible(false)} // Android 返回键关闭事件
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.modalText}>This is a dialog!</Text>
            <MyButton01 text="Close Dialog" onPress={() => setModalVisible(false)} />
          </View>
        </View>
      </Modal>


  </View>;
}